<template>
    <div class="about-us-body">

        <FullHeadImg backImage="aboutus/about_bg.png">
        </FullHeadImg>
        
        <section v-for="(item, idx) in aboutusConfig" :key="idx" :class="['about-item', { 'full-bg': idx % 2 === 1 }]">
            <div class="body-m">
                <h2>{{ item.title }}</h2>
                <div class="about-paraph">
                    <!-- 大屏幕展示 -->
                    <div v-if="!isSmallScreen">
                        <img style="float: right; margin-left: 1rem;" :src="getImage(item.image)" alt=""
                            v-if="idx % 2 == 0">
                        <img style="float: left; margin-right: 1rem;" :src="getImage(item.image)" alt="" v-else>
                    </div>
                    <!-- 小屏幕展示 -->
                    <img :src="getImage(item.image)" alt="" v-else>

                    <div class="article-content">
                        <h4 v-if="item.subTitle">{{ item.subTitle }}</h4>
                        <section>
                            <p v-for="(desc, idx) in item.desc" :key="idx" style="padding-bottom: 1rem;">
                                {{ desc }}
                            </p>
                        </section>
                    </div>
                </div>
            </div>
        </section>

        <div></div>
    </div>
</template>

<script setup lang="ts" name="name">
import aboutusConfig from '@/utils/aboutusConfig';
import { useScreenSize } from '@/utils/useScreenSize';
const { isSmallScreen } = useScreenSize()

</script>

<style scoped lang="scss">
.about-us-body {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.about-item {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    align-items: center;

    .body-m {
        display: flex;
        flex-direction: column;

        h2 {
            padding: 1rem 0;
        }

        .about-paraph {
            // display: flex;
            // flex-direction: row;
            // gap: 2rem;

            .article-content {
                margin: 0;
                text-align: left;
            }

            h4 {
                font-weight: bold;
                padding-bottom: 1rem;
            }

            img {
                width: 45%;
                margin-bottom: 1rem;
                object-fit: cover;
                height: auto;
            }
        }
    }

}

@media (max-width: 650px) {
    .about-us-body {
        gap: 2rem;
    }

    .about-item {
        .body-m {
            text-align: center;

            .about-paraph {
                img {
                    width: 100%;
                }
            }
        }
    }
}
</style>